{% extends "base.html" %}

{% block stylesheets %}
<style>
    .hide-text { text-overflow: ellipsis; overflow: hidden; }
    .dialog-inner {padding-bottom: 30px;}
    .alert {display: none}
    .category-header {text-align: center}
    /*.challenge-wrapper {padding: 5px;} */
    .challenge-wrapper {padding: 20px;}
    .challenge-button {width: 100%; height:100px;}
    .submit-row {padding-top: 0px; padding-right: 0px; padding-left: 0px;}
    .disabled-button {background-color: #EEEEEE}

    .file-button {text-decoration: none; color: #fff;}
    .file-button:hover {text-decoration: none; color: #fff;}
    .file-wrapper {padding: 10px; transition: all 0.5s ease; cursor: pointer; color: #fff; width: 100%; text-overflow: ellipsis; overflow: hidden;}
    .file-button {cursor: pointer;}
    .file-button-wrapper {padding: 0px 10px;}

    .close-text {color: #ccc;position: relative;top: -25px;right: -15px;cursor: pointer;}
    .chal-desc {padding-left: 30px; padding-right: 30px;}
    .key-submit {padding-top: 14px; padding-right: 10px;}
    .notification-row {padding-left: 10px;padding-right: 10px;}
    .input {padding-right: 5px;}
    .input-field:focus + .input-field,
    .input--filled .input-field {
        border-color: rgb(238, 238, 238);
    }
    .input-field:focus + .input-field,
    .input--filled .correct {
        border-color: rgb(223, 240, 216);
    }
    .input-field:focus + .input-field,
    .input--filled .wrong {
        border-color: rgb(255, 190, 190);
    }

    .input-field:focus + .input-field,
    .input--filled .too-fast {
        border-color: rgb(252, 248, 227);
    }
    a, button {
        color: #74716D;
        text-decoration: none;
        outline: none;
    }

    a:hover, a:focus {
        color: #c94e50;
        outline: none;
    }

    button {
        padding: 1em 2em;
        outline: none;
        font-weight: 600;
        border: none;
        color: #fff;
        background: #c94e50;
    }

    .content {
        max-width: 1000px;
        padding: 2em;
        margin: 0 auto;
        text-align: center;
    }

    .button-wrap {
        padding: 2.5em 0 0;
        font-size: 1.25em;
    }

    button.trigger {
        background: #c94e50;
        color: #fff;
        border: none;
    }

    button.trigger.solved-challenge {
        background: #37d6d6;
        color: black;
        border: none;
    }
</style>
{% endblock %}

{% block content %}

{% if errors %}
<div class="container main-container">
    <div id='errors' class="row">
{% for error in errors %}
        <h1>{{ error }}</h1>
{% endfor %}
    </div>
</div>
{% else %}

<div class="jumbotron home">
    <div class="container">
        <h1>Challenges</h1>
    </div>
</div>
<div class="container main-container">
    <div id='challenges-board' class="row">
    </div>
</div>

<input id="nonce" type="hidden" name="nonce" value="{{ nonce }}">

<div class="modal fade" id="hint-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header text-center">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3>Hint</h3>
            </div>
            <div class="modal-body" id="hint-modal-body">
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="chal-window" tabindex="-1" role="dialog">
</div>
{% endif %}
{% endblock %}

{% block scripts %}
    <script src="{{ request.script_root }}/themes/{{ ctf_theme() }}/static/js/utils.js"></script>
    <script src="{{ request.script_root }}/themes/{{ ctf_theme() }}/static/js/multi-modal.js"></script>
    {% if not errors %}<script src="{{ request.script_root }}/themes/{{ ctf_theme() }}/static/js/chalboard.js"></script>{% endif %}
    <script src="{{ request.script_root }}/themes/{{ ctf_theme() }}/static/js/style.js"></script>
{% endblock %}
